<template>
    <ul class="mui-table-view mui-grid-view mui-grid-12">
        <li v-for="({file, name, url}, index) in myButtons" class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <a @tap="openPage(url)">
                <img class="mui-icon" :src="webApiDomain + '/public/uploads/' + file.savepath + file.savename" style="width:1rem">
                <div class="mui-media-body" style="font-size: .3rem;line-height: .6rem;height: 100%;">{{name}}</div>
            </a>
        </li>
    </ul>
</template>

<script>

import { apiDomain } from 'assets/js/Lib';

export default {
    data() {
        return {
            myButtons: [],
            isBig: false
        }
    },
    computed: {
        webApiDomain: function () {
            return apiDomain;
        }
    },
    watch: {
        buttons: function () {
            if (this.buttons.length > 0) this.myButtons = this.buttons
        }
    },
    components: {

    },
    props: {
        buttons: {
            type: Array,
            default: []
        }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {

    },
    //在挂载开始之前被调用
    beforeMount() {


    },
    //已成功挂载，相当ready()
    mounted() {
        const vm = this;

        let cache = localStorage.getItem('$ads-icons')

        cache ? (cache = JSON.parse(cache)) : (cache = [])

        if (cache.length > 0) this.myButtons = cache
    },
    //相关操作事件
    methods: {
        openPage: function (url) {
            let pageConfig = {
                "id": url,
                "url": url,
                show: {
                    autoShow: true
                },
                waiting: {
                    title: '加载中...'
                }
            }
            if (!url) {
                pageConfig.id = "building"
                pageConfig.url = "building.html"
            }

            mui.openWindow(pageConfig)
        }
    }
}
</script>

<style lang="less">

</style>
